<template>
  <div class="flower">
    <div class="loving">
      <!-- <div class="deadline">|&nbsp;爱情鲜花</div> -->
      <div class="block" v-for="item in flowersArray" :key="item.flowerId">
        <!-- <span class="demonstration">{{ fit }}</span> -->
        
        <el-image
          style="width: 300px; height: 300px; display: block"
          :src="item.flowerImg"
          @click="toDetail(item.flowerId)"
        >
        </el-image>
      
        {{ item.flowerName }}
        <p class="price">￥{{ item.flowerPrice }}</p>
      </div>
    </div>
    <div class="block">

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
    :current-page="this.pageQuery.pageNo" :page-sizes="[6, 12, 18, 24]" :page-size="this.pageQuery.pageSize"
    layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
  </div>
</template>

<script>
import {getFlower} from '@/api/flower' 
export default {
  data() {
    return {
      total: 0,
            pageQuery: {
                pageNo: 1,
                pageSize: 12,
            },
      flowersArray: [
        
      ],
    };
  },
  methods: {
    toDetail(flowerId) {
      this.$router.push({ path: '/flowerdetails' ,query:{flowerId}}).catch(err=>err)

    },
    
    init() {
      getFlower(this.pageQuery)
        .then(res => {

          this.flowersArray = res.data.records
          this.total = res.data.total

        })
        .catch(() => {

        })
    },
    handleSizeChange(val) {
            this.pageQuery.pageSize = val
            this.init();

        },
        handleCurrentChange(val) {
            this.pageQuery.pageNo = val
            this.init();
        }
  },

  mounted() {
    this.init();
  }
  
};
</script>

<style lang="scss">
.flower {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  // background-color: #f5f5f5;

  .loving {
    width: 80%;
    margin: auto;
    background-color: #f5f5f5;
    display: flex;
    flex-wrap: wrap;
    .deadline {
      padding-top: 10px;

      text-align: left;
      color: #8f633c;
      font-size: 24px;
      width: 80%;
      // border: 1px solid black;
    }
    .block {
      overflow: hidden; //图片超出div部分隐藏
      margin-top: 15px;
      padding: 10px;
      margin-left: 45px;
      background-color: #ffffff;
      display: inline-block;
      // border: 1px solid black;
      // float: left;
      
      transition: all 0.6s; //设置动画执行的时间为0.6s
      cursor: pointer;
      
      
      .price {
        color: red;
        font-size: 24px;
      }
    }
    .block:hover{
        transform: scale(1.05); //设置图片按照比例放大1.3倍
      }

    //  border: 1px solid black;
  }
}
</style>